<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #container {
        width: 1000px;
        height: 800px;
        background: #aaa;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>

    <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
    <script src="/js/sprite-extend-shapes.js"></script>
    <script src="./ellipse.demo.js"></script>
    <script src="./polygon.demo.js"></script>
    <script src="./polyline.demo.js"></script>
    <script src="./wave.demo.js"></script>
    <script>
      spritejs.use(spriteShapes.install);

      const {
        Sprite,
        Group,
        Polygon,
        Polyline,
        Triangle,
        Rect,
        Star,
        Arc,
        Sector,
        Circle,
        Ring,
        Ellipse,
        EllipseArc,
        EllipseSector,
        Polycurve,
        Wave
      } = spritejs;

      const {Scene, Layer} = spritejs;

      const scene = new Scene('#container', {
        resolution: [1000, 800],
        displayRatio: 'auto'
      });
      const layer = scene.layer();

      renderEllipseShapes();
      renderPolygonShapes();
      renderPolylineShapes();
      renderWaveShapes();
    </script>
  </body>
</html>
